<template>
	<view class="video-list-wrap">
		<navBar title="视频" :showHome="true" :showBack="true" marginLeft="60%" />
		<view class="content-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="tag-title">
				视频推荐
			</view>
			<view class="video-list-content">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullData"
					@refresherrefresh="refreshData" refresher-enabled="true" :refresher-triggered="triggered"
					refresher-background="#CF1A1B">
					<view class="list-content-box">
						<view class="list-item" v-for="(item,index) in videoList" @click="openPlay(item,index)"
							:key="item.id">
							<view class="video-bg">
								<image :src="item.coverVideo"></image>
								<!-- 								<video v-else class="myVideo" :src="item.video" :controls="false" object-fit="fill" :show-center-play-btn="false"
									:show-play-btn="false" :show-fullscreen-btn="false"></video> -->
							</view>
							<view class="tip" v-if="item.isTop">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/zdtip.png">
								</image>
							</view>
							<view class="video-btn">
								<view class="btn">
									<view class="avt">
										<image
											:src="item.terminalImg?item.terminalImg:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/mratv.png'">
										</image>
										<text class="name">{{ item.name }}</text>
									</view>
									<view class="rate" @tap.stop="setLike(item,index)">
										<u-icon name="thumb-up" :color="item.isLikes?'#CF1A1B':'#fff'"
											size="40"></u-icon>
										{{ item.likes}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="load-more" v-if="videoList.length != 0">
						<u-loadmore :status="loadingStatus" :font-size="28" :icon-size="28" />
					</view>
				</scroll-view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'

	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'video-list',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		data() {
			return {
				videoList: [],
				pageNum: 1,
				pageSize: 10,
				triggered: false,
				loadingStatus: 'loadmore',
				total: 0
			}
		},
		methods: {
      // 校验视频是否存在
      async existShow(id){
      	return new Promise((resolve, reject) => {
      		this.$request({
      			method: 'GET',
      			url: '/terminal-serve-center/app/cars/existShow',
      			data: {
      				id
      			}
      		}).then(res => {
      			resolve(res.datas.existFlag)
      		}).catch(res => {
      			reject(res.datas.existFlag)
      		})
      	})
      },
      
			// 初始化页面
			async initData() {
				if (this.loadingStatus == 'nomore') {
					return false
				}
				try {
					const res = await this.$request({
						url: '/terminal-serve-center/app/cars/getVideoList',
						data: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							userId: this.getUserInfo.id
						}
					})
					res.datas.data.forEach((item) => {
						item.pageNum = this.pageNum
					})
					this.videoList = this.videoList.concat(res.datas.data)
					this.total = res.datas.count
					res.datas.data.length < this.pageSize ? (this.loadingStatus = 'nomore') : (this.loadingStatus =
						'loadmore');
					uni.hideLoading()
					this.triggered = false
				} catch (e) {
					uni.hideLoading()
					this.triggered = false
				}
			},
      
			async openPlay(val, index) {
        const checkStatus = await this.existShow(val.id)
        if(!checkStatus){
        	uni.showToast({
        		title: '操作失败，该视频已被删除',
        		icon: 'none'
        	})
        	setTimeout(() => {
            uni.showLoading({
            	title: '加载中...'
            })
            this.videoList = []
            this.pageNum = 1
            this.pageSize = 10
        		this.initData()
        	}, 1000)
        	return false
        }
				uni.navigateTo({
					url: `/videoPack/videoDetail/index?pageNum=${val.pageNum}&id=${val.id}`
				});
			},
      
			async setLike(val, index) {
        const checkStatus = await this.existShow(val.id)
        if(!checkStatus){
        	uni.showToast({
        		title: '操作失败，该视频已被删除',
        		icon: 'none'
        	})
        	setTimeout(() => {
            uni.showLoading({
            	title: '加载中...'
            })
            this.videoList = []
            this.pageNum = 1
        		this.initData()
        	}, 1000)
        	return false
        }
				try {
					const res = await this.$request({
						url: '/terminal-serve-center/app/cars/storeShowLikes',
						data: {
							isLikes: val.isLikes ? 0 : 1,
							userId: this.getUserInfo.id,
							id: val.id
						}
					})
					if (val.isLikes) {
						this.$refs.uToast.show({
							message: '点赞已取消！',
						})
						this.videoList[index].isLikes = 0
						this.videoList[index].likes = this.videoList[index].likes - 1
					} else {
						this.$refs.uToast.show({
							message: '谢谢点赞！',
						})
						this.videoList[index].isLikes = 1
						this.videoList[index].likes = this.videoList[index].likes + 1
					}


				} catch (e) {

				}
			},
			pullData() {
				if (this.total == this.videoList.length) {
					this.loadingStatus = 'nomore'
					this.triggered = false
					return false
				}
				this.pageNum++
				this.loadingStatus = 'loading';
				this.initData()
			},
			refreshData() {
				this.videoList = []
				this.triggered = true
				this.pageNum = 1
				this.loadingStatus = 'loadmore'
				this.initData()
			},

		},
		onHide() {},
		onLoad(option) {
			uni.showLoading({
				title: '加载中...'
			})
			this.initData()
		}
	}
</script>

<style scoped lang="scss">
	.video-list-wrap {
		height: 100%;
		width: 100%;
		overflow: hidden;

		.load-more {
			padding: 20rpx;
		}

	}

	.content-box {
		padding: 20rpx;
		height: calc(100% - 168rpx);

		.tag-title {
			font-size: 17px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #040812;
			padding-left: 12rpx;
			border-left: 8rpx solid #F3260A;
		}

		.video-list-content {
			margin: 10rpx 0;
			height: calc(100% - 22rpx);
			overflow: hidden;
			overflow-y: auto;

			.list-content-box {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
			}

			.list-item {
				width: calc(50% - 20rpx);
				margin: 10rpx;
				height: 500rpx;
				position: relative;
				background: #040812;
				border-radius: 16rpx;

				.video-bg {
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}

					video {
						width: 100%;
						height: 100%;
					}
				}

				.tip {
					position: absolute;
					left: 20rpx;
					top: 20rpx;

					image {
						width: 100rpx;
						height: 40rpx;
					}
				}

				.video-btn {
					position: absolute;
					bottom: 0;
					padding: 20rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					width: calc(100% - 40rpx);

					.btn {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #fff;
						font-size: 12px;

						.avt {
							display: flex;
							align-items: center;

							image {
								width: 36rpx;
								height: 36rpx;
								margin-right: 4rpx;
								border: 1rpx solid #FFFFFF;
								border-radius: 50%;
							}

							.name {
								width: calc(100% - 40rpx);
								word-wrap: break-all;
								overflow: hidden;
								line-break: anywhere;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								line-clamp: 1;
								-webkit-box-orient: vertical;
							}
						}

						.rate {
							display: flex;
							align-items: center;

							/deep/ .u-icon {
								margin-right: 4rpx;
							}
						}
					}
				}
			}
		}
	}
</style>